<template>
  <el-container>
    <el-header class="header">
      <div class="left-panel">
        <el-form class="search-form" ref="formRefSearch" :inline="true" :model="formSearch">
          <el-form-item label="登录时间" prop="datetime">
            <el-date-picker v-model="formSearch.datetime" :shortcuts="getPickerShortcuts()" type="datetimerange"
              range-separator="至" start-placeholder="开始日期时间" end-placeholder="结束日期时间" />
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="Search" @click="onSearch">搜索</el-button>
            <el-button type="info" icon="RefreshLeft" @click="resetForm(formRefSearch)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-header>
    <el-main class="main">
      <el-table border :data="loginLogArr" height="calc(100vh - 280px)" :stripe="true" :highlight-current-row="true"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
        <el-table-column label="登录名" prop="loginUser" align="center">
        </el-table-column>
        <el-table-column label="登录IP" prop="loginIp" align="center">
        </el-table-column>
        <el-table-column label="登录地点" prop="loginLocation" align="center">
        </el-table-column>
        <el-table-column label="操作系统" prop="os" align="center">
        </el-table-column>
        <el-table-column label="浏览器类型" prop="browser" align="center">
        </el-table-column>
        <el-table-column label="登录行为" prop="logMsg" align="center">
        </el-table-column>
        <el-table-column label="登录时间" prop="dateTime" align="center">
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" @size-change="sizeChange" @current-change="getLoginLog" :pager-count="9"
        v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[10, 20, 50, 100]" :background="true"
        layout="total,sizes,prev, pager, next, jumper" :total="total" />
    </el-main>
  </el-container>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue';
import { getPickerShortcuts } from "@/utils/datepicker";
import { getLoginLogListApi } from "@/api/modules/log"

const loading = ref(false);
let loginLogArr = ref([]);
let pageNo = ref<number>(1);
let limit = ref<number>(20);
let total = ref<number>(0);
let pageCon = reactive({
  PageNum: pageNo.value,
  PageSize: limit.value
})
let formRefSearch = ref();
let formSearch = reactive({
  loginname: '',
  datetime: [],
  datetimestart: '',
  datetimeend: ''
})
const selectable = (row) => ![1].includes(row.id)
let deleteIds = reactive([])
const today = new Date();
const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
startOfMonth.setHours(0, 0, 0, 0);
const endOfMonth = new Date(
  today.getFullYear(),
  today.getMonth() + 1,
  0
);
endOfMonth.setHours(23, 59, 59, 999);

onMounted(() => {
  formSearch.datetime = [startOfMonth, endOfMonth]
  getLoginLog();
});
const getLoginLog = async (pager = 1) => {
  pageNo.value = pager;
  if (formSearch.datetime.length > 0) {
    formSearch.datetimestart = formSearch.datetime[0];
    formSearch.datetimeend = formSearch.datetime[1];
  }
  let result = await getLoginLogListApi({ ...formSearch, ...pageCon });
  if (result?.status == 200) {
    total.value = result.response.dataCount;
    loginLogArr.value = result.response.data;
  }
}
const sizeChange = () => {
  getLoginLog();
}
const handleSelectionChange = (val: []) => {
  deleteIds = val
}
const onSearch = () => {
  loading.value = true;
  getLoginLog();
  loading.value = false;
}
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  formSearch.datetime = [startOfMonth, endOfMonth]
  onSearch();
}
</script>
<style scoped lang='scss'></style>